<!DOCTYPE html>
<html manifest="pinyin.manifest">

<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>汉字到拼音</title>

</head>
<link rel="stylesheet" type="text/css" href="pinyin.css">

<body>

    <nav>
        <a class="nav-link" href="hanzi.html">汉字学习</a>
        <a class="nav-link" href="pinyin.html">拼音学习</a>
        <a class="nav-link" href="bihua.html">笔画学习</a>
    </nav>

    <div class="container">
        <input type="text" placeholder="在此处输入要学习的汉字" id="pyText" onchange="textchanged();" onkeyup="textchanged();">
        <div id="pySelect"></div>
        <div style="float: left;">
        <div style="float: left;text-align: left;" id="pyShow"></div>
        </div>
        <audio id="pymp3" src=""></audio>
    </div>
    <script src="pydic.js"></script>
    <script src="pymp3.js"></script>
    <script src="query.js"></script>
    <script type="text/javascript">
        function textchanged() {
        var text = document.getElementById("pyText").value;
        var pys = getPinyin(text);
        show(pys);
    }

    function getPinyin(text) {
        var ret = [];
        for (var i = 0; i < text.length; i++) {
            var py = pyDic[text[i]];
            if (py) {
                ret.push(py);
            }
        }
        return ret;
    }
    </script>
</body>

</html>